<template>
	<view class="main">
		<view class="mains">
			<u-sticky>
				<view class="top">
					<!-- <u-subsection :list="tagList" bgColor="#F2F6FC" fontSize="20" :current="current"
						@change="sectionChange"></u-subsection> -->
					<view class="tag-list">
						<view class="tag-item" v-for="(item, index) in tagList" :key="index"
							:class="current == index ? 'active' : ''" @click="sectionChange(index)">
							<text>{{item}}</text>
						</view>
					</view>
				</view>
			</u-sticky>
			<view v-if="current === 0" class="stat">
				<view v-if="data" class="info">
					<view class="title border-bottom">
						基本信息
					</view>
					<view class="items border-bottom">
						<view class="lefts">
							<text>终端SN</text>
						</view>
						<view class="rights">
							<text>{{sn}}</text>
						</view>
					</view>
					<view class="items border-bottom">
						<view class="lefts">
							<text>产品类型</text>
						</view>
						<view class="rights">
							<text>{{data.product}}</text>
						</view>
					</view>
					<view class="items border-bottom">
						<view class="lefts">
							<text>商户编号</text>
						</view>
						<view class="rights">
							<text>{{data.merchant_id}}</text>
						</view>
					</view>
					<view class="items border-bottom">
						<view class="lefts">
							<text>商户名称</text>
						</view>
						<view class="rights">
							<text>{{data.merchant_name}}</text>
						</view>
					</view>
					<view v-if="data.merchants" class="items border-bottom">
						<view class="lefts">
							<text>商户姓名</text>
						</view>
						<view class="rights">
							<text>{{data.merchants.name}}</text>
						</view>
					</view>
					<view class="items">
						<view class="lefts">
							<text>注册时间</text>
						</view>
						<view class="rights">
							<text>{{data.access_time}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="current === 1" class="stat">
				<view v-if="rates" class="infos">
					<view class="items border-bottom">
						<view class="lefts">
							<text style="font-weight: bold; font-size: 34rpx;">费率信息</text>
						</view>
						<view class="rights">
							<text v-if="userinfo.rate_state == 1" style="color: #2979ff;" @click="rateLog">变更记录</text>
						</view>
					</view>
					<view class="items border-bottom">
						<view class="lefts">
							<u-icon name="/static/icons/rate_1.png" size="20"></u-icon>
							<text>贷记卡费率</text>
						</view>
						<view class="rights">
							<u--input type="digit" border="surround" v-model="rates.rates" maxlength="4"></u--input>
							<text>%</text>
						</view>
					</view>
				</view>
				<view v-if="userinfo.rate_state == 1" class="btn" @click="editRate">
					<text>提交</text>
				</view>
			</view>
			<view v-else class="stat">
				<view v-if="total" class="total">
					<view class="tips">
						<u-icon name="red-packet" size="28" color="#ffffff"></u-icon>
						<text>本月总交易统计</text>
					</view>
					<view class="total-list">
						<view class="items">
							<view class="number">
								<text>{{total.total_amount}}</text>
							</view>
							<view class="names">
								<text>交易额(元)</text>
							</view>
						</view>
						<view class="items">
							<view class="number">
								<text>{{total.nums}}</text>
							</view>
							<view class="names">
								<text>交易笔数(笔)</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="list && list.length > 0" class="total-detail">
					<view v-for="(item,index) in list" :key="index" class="items" @click="tradeDetail(item)">
						<view class="lefts">
							<view class="dates">
								{{item.month}}
							</view>
							<view class="totals">
								<text>交易总额：</text>
								<text>{{item.total_amount}}</text>
							</view>
						</view>
						<view class="rights">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagList: ['基本信息', '费率详情'],
				current: 0,
				sn: '',
				data: null,
				total: null,
				list: [],
				original_rates: '',
				rates: {
					rates: ''
				},
				userinfo: {},
			}
		},
		onLoad(e) {
			this.sn = e.sn
			this.userinfo = uni.getStorageSync('userinfo')
			this.loadData()
			this.getMerchantTradeTotal()
			this.getSelfPolicy()
		},
		methods: {
			// 选择类别
			sectionChange(index) {
				this.current = index
			},
			// 获取数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getHzyMerchantInfo',
					data: {
						sn: this.sn
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.data = res.data
				}
			},
			// 获取商户交易数据
			async getMerchantTradeTotal() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getMerchantTradeTotal',
					data: {
						sn: this.sn
					}
				});
				if (res.code == 200) {
					this.total = res.data.total
					this.list = res.data.list
				}
			},
			// 获取自己费率政策
			async getSelfPolicy() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getHzySelfPolicy',
					data: {
						sn: this.sn
					}
				});
				if (res.code == 200) {
					this.original_rates = res.data.rates
					this.rates = res.data
				}
			},
			// 变更记录
			rateLog() {
				uni.navigateTo({
					url: '/pages/hzy/team/rateLog?sn=' + this.sn
				})
			},
			// 交易详情
			tradeDetail(item) {
				uni.navigateTo({
					url: '/pages/hzy/client/tradeDetail?sn=' + item.sn + '&month=' + item.month
				})
			},
			// 修改费率
			editRate() {
				if (this.rates.rates*1000 < 550 || this.rates.rates*1000 >600) {
					uni.showToast({
						title: "贷记卡费率设置超出限制",
						duration: 1000,
						icon: "none"
					});
					return false
				}
				if (this.rates.rates*1000 == this.original_rates*1000) {
					uni.showToast({
						title: "贷记卡费率未修改",
						duration: 1000,
						icon: "none"
					});
					return false
				}
				this.editRateFun()
			},
			// 修改费率 - 提交
			async editRateFun() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/editHzyRateFun',
					data: this.rates
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					duration: 1000,
					icon: "none"
				});
				if (res.code == 200) {
					setTimeout(function() {
						uni.navigateBack({});
					},1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F2F6FC;
	}

	.main {
		.mains {
			.top {
				background-color: #ffffff;
				padding: 30rpx;

				.tag-list {
					display: flex;
					justify-content: space-between;
					align-items: center;
					text-align: center;
					border: 1px solid #2979ff;
					border-radius: 16rpx;
					overflow: hidden;

					.tag-item {
						width: 50%;
						padding: 20rpx 0;
					}

					.active {
						background-color: #2979ff;
						color: #ffffff;
					}
				}
			}

			.stat {
				margin-top: 20rpx;
				padding: 0rpx 30rpx;

				.info {
					padding: 20rpx;
					margin-bottom: 30rpx;
					background-color: #ffffff;
					border-radius: 16rpx;
					box-shadow: 0 0 16px -14px #333;
					padding-bottom: 0px;

					.title {
						font-weight: bold;
						padding-bottom: 20rpx;
					}

					.items {
						font-size: 30rpx;
						display: flex;
						justify-content: space-between;
						padding: 20rpx 0;
						align-items: center;

						.rights {
							overflow: hidden;
							white-space: nowrap;
							width: 70%;
							text-align: right;
						}
					}

					.border-bottom {
						border-bottom: 1px solid #f4f4f5;
					}
				}

				.infos {
					padding: 20rpx;
					margin-bottom: 30rpx;
					background-color: #ffffff;
					border-radius: 16rpx;
					box-shadow: 0 0 16px -14px #333;
					padding-bottom: 0px;

					.title {
						font-weight: bold;
						padding-bottom: 20rpx;
					}

					.items {
						font-size: 30rpx;
						display: flex;
						justify-content: space-between;
						padding: 20rpx 0;
						align-items: center;
						
						.lefts {
							display: flex;
							align-items: center;
							text {
								padding-left: 10rpx;
							}
						}

						.rights {

							width: 30%;
							display: flex;
							justify-content: flex-end;
							align-items: center;

							input {
								background-color: #f4f4f5;
								border-radius: 10rpx;
								padding-right: 50rpx;
								padding-left: 10rpx;
								text-align: right;
								padding-top: 6rpx;
								padding-bottom: 6rpx;
							}

							text {
								position: absolute;
								padding-right: 10rpx;

							}
						}
					}

					.border-bottom {
						border-bottom: 1px solid #f4f4f5;
					}
				}

				.total {
					background-color: #2979ff;
					color: #ffffff;
					border-radius: 18rpx;
					padding: 20rpx;

					.tips {
						display: flex;
						font-size: 36rpx;
						font-weight: bold;
					}

					.total-list {
						padding-top: 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.items {
							width: 50%;
							text-align: center;
						}
					}
				}

				.total-detail {
					margin-top: 30rpx;

					.items {
						display: flex;
						justify-content: space-between;
						align-items: center;
						background-color: #ffffff;
						font-size: 24rpx;
						padding: 20rpx;
						border-radius: 16rpx;
						box-shadow: 0 0 16px -14px #333;
						margin-bottom: 30rpx;

						.lefts {
							.dates {
								padding-bottom: 10rpx;
							}

							.totals {
								color: #909399;
							}
						}
					}
				}

				.btn {
					background-color: #2979ff;
					color: #ffffff;
					padding: 30rpx;
					text-align: center;
					border-radius: 20rpx;
				}
			}
		}
	}
</style>